<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" th:href="@{/favicon.ico}">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="cowHouse-contentPart">
    <div class="cowHouse-main">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" id="startTime" th:value="${beginTime}" placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>--</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" id="endTime" th:value="${endTime}" placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class=" thisYear btn btn-primary mlr_8">本年</a>
                                <a class=" thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <!--统计区域-->
        <div class="row rowNew">
            <div class="statistics-area">
                <div class="statistics-list clearfix">
                    <div class="statistics-item col-xs-6 col-sm-4 col-lg-2" th:each="milk,0:${list}">
                        <div th:id="${milk.type}" th:class="'main color0'+ ${milk.class} ">
                            <div class="indro" th:text="${milk.key}">总产奶量</div>
                            <div class="num" th:text="${milk.val}"><span class="unit">kg</span></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--图表区域-->
        <div class="row rowNew">
            <div class="echart-item col-sm-12">
                <div id="main" style="width:100%;height:410px;"></div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>


<script>
    $(function(){

    });
</script>
<script type="text/javascript"  th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var xData = [[${xDate}]];
    var yData = [[${sum}]];
    var _title = '牛奶产量图';
    // 指定图表的配置项和数据
    var option01 = {
        legend:{
            data:['产量'],
            right:'3%',
            selectedMode:false
        },
        title: {
            text: _title,
            x: 'center',
            textStyle:{
                fontSize:36,
                color:'#2d353e'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid:{
            top:'20%',
            bottom:'6%',
            left:'7%',
            right:'5%'
        },
        xAxis: {
            data: xData,
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ebeef1'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#a3abb4',
                    fontSize: 14,
                }
            }
        },
        yAxis: {
            name: 'kg',
            nameTextStyle:{
                color: '#a3abb4',
                fontSize: 14,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ebeef1'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ebeef1'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#a3abb4',
                    fontSize: 14,
                }
            }
        },
        series: [{
            name:'产量',
            type: 'bar',
            barWidth: 12,
            emphasis: {
                itemStyle: {
                    color: '#52adff'
                }
            },
            itemStyle: {
                normal: {
                    color: '#52adff',
                    barBorderRadius: [0, 0, 0, 0],
                }
            },
            data: yData
        }, {
            name: 'a',
            tooltip: {
                show: false
            },
            type: 'bar',
            barWidth: 12,
            emphasis: {
                itemStyle: {
                    color: '#2e9bff'
                }
            },
            itemStyle: {
                normal: {
                    color: '#2e9bff',
                    barBorderRadius: [0, 0, 0, 0]
                }
            },
            data: yData,
            barGap: 0,
            legendHoverLink: false,
        }, {
            name: 'b',
            tooltip: {
                show: false
            },
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    color: '#73bbff',
                }
            },
            symbol: 'image://',
            symbolRotate: 0,
            symbolSize: ['24', '10'],
            symbolOffset: ['0', '5'],
            symbolPosition: 'start',
            data: yData,
            z: 3
        }, {
            name: 'b',
            tooltip: {
                show: false
            },
            type: 'pictorialBar',
            itemStyle: {
                normal: {
                    color: '#73bbff',
                }
            },
            symbol: 'image://',
            symbolRotate: 0,
            symbolSize: ['24', '10'],
            symbolOffset: ['0', '-5'],
            symbolPosition: 'end',
            data: yData,
            z: 3
        }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option01);
    $(".main").click(function () {
            $(".main").removeClass("active");
            $(this).addClass("active");
            if($(this).attr('id') == "no"){
                return;
            }
            var link = '/system/ncCowsMilk/milkOrder?type=' + $(this).attr('id');

            var s = $('#startTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e
             $.modal.openTab("牛舍订单列表", link);
        }
    )
    ;










    function reloadIt() {

        var link = "/system/ncCowsMilk/selectMilkOut";
        var s = $('#startTime').val();
        var e = $('#endTime').val();

        link += "?beginTime=" + s + "&endTime=" + e;
        window.location.href = link;
    }

    $('.thisYear').click(function () {
        $('#startTime').val(new Date().getFullYear() + "-01-01");
        reloadIt();
    });

    $('.thisMonth').click(function () {
        var d = new Date();
        var m = d.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
        reloadIt();
    });

</script>
</body>
</html>
